<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2022-06-28 15:28:04
 * @LastEditors: 覃雪强 2385249581@qq.com
 * @LastEditTime: 2023-01-05 22:16:56
-->
<template>
  <div>
    <!-- 顶部区 -->
    <div class="topArea">
      <!-- 搜索框 -->
      <el-input
        style="width: 60%"
        placeholder="请输入搜索内容"
        v-model="inputStr"
      >
      </el-input>
      <!-- 搜索按钮 -->
      <el-button type="primary" size="small" @click="getHosData2"
        >搜索</el-button
      >
      <!-- 新增按钮 -->
      <el-button type="primary" size="small" @click="addHosData"
        >新增</el-button
      >
    </div>

    <!-- 表格区 -->
    <div class="content">
      <el-table :data="hosData" style="width: 100%" stripe>
        
        <el-table-column prop="name" label="医院名称" align="center">
        </el-table-column>
        <el-table-column prop="introduce" label="医院简介" align="center">
        </el-table-column>
        <el-table-column label="医院地址" align="center">
          <template slot-scope="scope">
            {{
              scope.row.province +
              scope.row.city +
              scope.row.area +
              scope.row.address
            }}
          </template>
        </el-table-column>
       
        <el-table-column
          :show-overflow-tooltip="true"
          prop="flags"
          label="标记"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="longitude" label="经度" align="center">
        </el-table-column>
        <el-table-column prop="latitude" label="纬度" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editHosData(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deleteHandler(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页区 -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-sizes="[2, 4, 6, 8, 10, 20]"
        :page-size="pageSize"
        layout="sizes, total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 摸态框 -->
    <el-dialog
      v-if="dialogVisible"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <el-form
        :model="hosForm"
        :rules="hosRules"
        ref="hosForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="hosForm.name"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="introduce">
          <el-input v-model="hosForm.introduce"></el-input>
        </el-form-item>
        <el-form-item label="省市区选择" prop="pca">
          <el-cascader
            v-model="hosForm.pca"
            :props="{ label: 'name', value: 'name' }"
            :options="pca"
          ></el-cascader>
        </el-form-item>

        <el-form-item label="详细地址" prop="address">
          <el-input v-model="hosForm.address"></el-input>
        </el-form-item>
        <el-form-item label="标记" prop="flags">
          <el-input v-model="hosForm.flags"></el-input>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="hosForm.longitude"></el-input>
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="hosForm.latitude"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitHandler('hosForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
import pca from "@/assets/pca.json";
export default {
  data() {
    return {
      // 医院名称搜索字符串
      inputStr: '',
      // 级联选择器
      pca,
      // 医院数据
      hosData: [],
      page: 1,
      pageSize: 10,
      total: 10,
      // 控制模态框的显示与隐藏
      dialogVisible: false,
      dialogTitle: "",
      // 要提交的表单对象
      hosForm: {},
      // 验证规则
      hosRules: {
        name: [{ required: true, message: "请输入医院名称", trigger: "blur" }],
        pca: [{ required: true, message: "请输入省市区", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
        latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
      },
    };
  },
  created() {
    
    // 获取定点医院的数据
    this.getHosData();

  },
  methods: {
    // 新增医院信息
    addHosData() {
      this.dialogTitle = "新增医院信息";
      // 清除拟态框的数据
      this.hosForm = {};
      this.dialogVisible = true;
    },
    // 修改医院信息
    editHosData(row) {
      this.dialogTitle = "修改医院信息";

      this.hosForm = { ...row };
      this.hosForm.pca = [row.province, row.city, row.area];
      this.dialogVisible = true;
    },

    // 更新和保存医院信息
    submitHandler(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = { ...this.hosForm };
          data.province = data.pca[0];
          data.city = data.pca[1];
          data.area = data.pca[2];
          delete data.pca;
          post("/hospital/saveOrUpdate", data).then((res) => {
            this.$message({
              message: "更新成功了",
              type: "success",
            });
            this.getHosData();
            this.hosForm = {};
            this.dialogVisible = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除信息
    deleteHandler(id) {
      
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          get("/hospital/deleteById", { id }).then((res) => {
            this.$message({
              type: "success",
              message: '删除成功',
            });
             let totalPage = Math.ceil(this.total / this.pageSize);
             let currentPage = this.page > totalPage ? totalPage : this.page;
             this.page = currentPage < 1 ? 1 : currentPage;
             this.getHosData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 获取医院数据
    async getHosData() {
      let params = {
        page: this.page,
        pageSize: this.pageSize,
        name: this.inputStr,
      };
      let res = await get("/hospital/pageQuery", params);
     console.log(res.data.index);
      this.total = res.data.total;
      this.hosData = res.data.list;
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.getHosData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getHosData();
    },
  },
};
</script>

<style scoped>
</style>